<template>
  <div class="editor-container">
    <div class="editor-body">
      <div class="form-row">
        <div class="form-item full-width">
          <label><span class="required">*</span> 题目名称</label>
          <div class="rich-editor">
            <div class="editor-toolbar">
              <select class="font-size-select" v-model="editorState.fontSize">
                <option value="12pt">12pt</option>
                <option value="14pt">14pt</option>
                <option value="16pt">16pt</option>
                <option value="18pt">18pt</option>
              </select>
              <button class="toolbar-btn" @click="execCommand('bold')"><i class="icon-bold">B</i></button>
              <button class="toolbar-btn" @click="execCommand('italic')"><i class="icon-italic">I</i></button>
              <button class="toolbar-btn" @click="execCommand('underline')"><i class="icon-underline">U</i></button>
              <button class="toolbar-btn" @click="execCommand('strikeThrough')"><i class="icon-strikethrough">S</i></button>
              <button class="toolbar-btn" @click="execCommand('formatBlock', '<blockquote>')"><i class="icon-quote">"</i></button>
              <button class="toolbar-btn" @click="execCommand('superscript')"><i class="icon-superscript">x²</i></button>
              <button class="toolbar-btn" @click="execCommand('subscript')"><i class="icon-subscript">x₂</i></button>
              <button class="toolbar-btn" @click="insertLink()"><i class="icon-link">🔗</i></button>
              <button class="toolbar-btn"><i class="icon-eye">👁</i></button>
              <button class="toolbar-btn"><i class="icon-clock">🕒</i></button>
              <button class="toolbar-btn"><i class="icon-formula">Σ</i></button>
              <button class="toolbar-btn"><i class="icon-pen">✎</i></button>
              <button class="toolbar-btn" @click="toggleFullscreen"><i class="icon-fullscreen">⤢</i></button>
              <button class="upload-btn">图片上传</button>
            </div>
            <div
              ref="titleEditor"
              class="editor-content"
              contenteditable="true"
              @input="updateTitleContent"
              v-html="questionData.title"
            ></div>
          </div>
        </div>
      </div>
      <div class="form-row">
        <div class="form-item full-width">
          <label><span class="required">*</span> 难度等级</label>
          <div class="difficulty-options">
            <button
              v-for="(level, index) in difficultyLevels"
              :key="index"
              :class="['difficulty-btn', questionData.difficulty === level.value ? 'active' : '']"
              @click="questionData.difficulty = level.value"
            >
              {{ level.label }}
            </button>
          </div>
        </div>
      </div>
      <!-- 视频题显示视频上传 -->
      <div class="options-section" >
        <h3>视频上传</h3>
        <div class="video-upload">
          <button class="upload-video-btn">
            <i class="icon-upload">📤</i>
            <span>上传视频</span>
          </button>
          <p class="upload-hint">支持mp4、mov等格式，大小不超过100MB</p>
        </div>
      </div>
    </div>
    <div class="editor-footer">
      <button class="btn-cancel">取消</button>
      <button class="btn-confirm">确认</button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
// 难度等级
const difficultyLevels = [
  { label: '简单', value: 'easy' },
  { label: '一般', value: 'normal' },
  { label: '较难', value: 'hard' },
  { label: '非常难', value: 'very-hard' }
];

// 编辑器状态
const editorState = reactive({
  fontSize: '12pt',
  isFullscreen: false
});

// 编辑器引用
const titleEditor = ref(null);
const answerEditor = ref(null);
const optionEditors = reactive({});

// 问题数据
const questionData = reactive({
  sequence: '1',
  score: '5',
  title: '《山行》是描绘了___的景色.',
  difficulty: 'normal',
  options: [
    { content: '春天' }
  ],
  judgmentAnswer: 'true',
  shortAnswer: '',
  languageType: 'chinese',
  timeLimit: 60
});




// 执行编辑器命令 - 题目
const execCommand = (command, value = null) => {
  document.execCommand('styleWithCSS', false, true);
  document.execCommand(command, false, value);
  if (titleEditor.value) {
    titleEditor.value.focus();
  }
};

// 执行编辑器命令 - 选项
const execOptionCommand = (index, command, value = null) => {
  document.execCommand('styleWithCSS', false, true);
  document.execCommand(command, false, value);
  if (optionEditors[index]) {
    optionEditors[index].focus();
  }
};

// 执行编辑器命令 - 答案
const execAnswerCommand = (command, value = null) => {
  document.execCommand('styleWithCSS', false, true);
  document.execCommand(command, false, value);
  if (answerEditor.value) {
    answerEditor.value.focus();
  }
};

// 插入链接 - 题目
const insertLink = () => {
  const url = prompt('请输入链接地址:', 'http://');
  if (url) {
    execCommand('createLink', url);
  }
};

// 切换全屏
const toggleFullscreen = () => {
  editorState.isFullscreen = !editorState.isFullscreen;
  // 这里可以添加全屏逻辑
};

// 更新题目内容
const updateTitleContent = (e) => {
  questionData.title = e.target.innerHTML;
};




// 组件挂载后初始化
onMounted(() => {
  // 初始化编辑器
  if (titleEditor.value) {
    titleEditor.value.focus();
  }
});
</script>

<style scoped>
.editor-container {
  width: 100%;
  margin: 0 auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
}





.expand-button, .close-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.icon-expand::after {
  content: '⤢';
}

.icon-close::after {
  content: '×';
}

.question-tabs {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
}

.tab-item {
  padding: 12px 24px;
  cursor: pointer;
  position: relative;
  color: #666;
  transition: color 0.3s;
}

.tab-item:hover {
  color: #4169e1;
}

.tab-item.active {
  color: #4169e1;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #4169e1;
}

.editor-body {
  padding: 20px;
  flex: 1;
}

.form-row {
  display: flex;
  margin-bottom: 20px;
  gap: 20px;
}

.form-item {
  flex: 1;
}

.full-width {
  width: 100%;
}

label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.required {
  color: #f56c6c;
  margin-right: 2px;
}

.input-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.rich-editor {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #dcdfe6;
  padding: 6px 8px;
}

.font-size-select {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 14px;
  margin-right: 4px;
}

.toolbar-btn {
  background: none;
  border: none;
  padding: 5px 8px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
}

.toolbar-btn:hover {
  background-color: #e6e6e6;
}

.upload-btn {
  background-color: #4169e1;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  margin-left: auto;
}

.editor-content {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  border: none;
  outline: none;
  font-size: 14px;
  line-height: 1.5;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
  background-color: #fff;
}

.difficulty-options {
  display: flex;
  gap: 5px;
}

.difficulty-btn {
  flex: 1;
  padding: 8px 16px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.difficulty-btn:hover {
  border-color: #c6e2ff;
  color: #409eff;
}

.difficulty-btn.active {
  background-color: #4169e1;
  border-color: #4169e1;
  color: white;
}

.options-section {
  margin-top: 30px;
}

.options-section h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
  color: #333;
}

.option-item {
  display: flex;
  margin-bottom: 12px;
  align-items: flex-start;
}

.option-label {
  width: 30px;
  margin-right: 10px;
  padding-top: 12px;
  font-size: 14px;
}

.option-content {
  flex: 1;
}

.option-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-left: 10px;
  padding-top: 20px;
}

.option-btn {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.option-btn.add {
  color: #67c23a;
}

.option-btn.remove {
  color: #f56c6c;
}

.option-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.judgment-options {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}

.judgment-option {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.video-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  border: 2px dashed #dcdfe6;
  border-radius: 4px;
  margin-top: 10px;
}

.upload-video-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 20px;
}

.icon-upload {
  font-size: 24px;
}

.upload-hint {
  color: #909399;
  font-size: 12px;
  margin-top: 10px;
}

.editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #e0e0e0;
}

.btn-cancel {
  padding: 8px 16px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.btn-confirm {
  padding: 8px 16px;
  background-color: #4169e1;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.btn-cancel:hover {
  border-color: #c6e2ff;
  color: #409eff;
}

.btn-confirm:hover {
  background-color: #365cc5;
}
</style>
